<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transfer</title>

  <!-- 组件样式（全部的） -->
  <link rel="stylesheet" href="../../dist/tdesign.css">
  <!--
    TDesign 图标库，桌面端与移动端用同样的资源
    使用方式：<i class="t-icon t-icon-prompt-fill"></i>
  -->
  <link rel="stylesheet" href="https://tdesign.gtimg.com/icon/0.0.3/fonts/index.css">
</head>
<body>
<div class="tdesign-demo-wrap">
  <!-- 开发者信息 -->
  <div class="tdesign-demo-wrap__name">
    <h1 class="">Transfer</h1>
    <p class="tdesign-demo-wrap__info">开发者：vickiliang</p>
    <p class="tdesign-demo-wrap__info">创建日期：2020-11-12</p>
    <p class="tdesign-demo-wrap__info">说明：TDesign Transfer 组件样式</p>
  </div>

  <!--默认状态-->
  <div class="tdesign-demo-item tdesign-demo-item--transfer">
    <h2 class="tdesign-demo-item__title">1.1.1 默认状态</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-transfer">
          <div class="t-transfer__list t-transfer__list-source">
            <div class="t-transfer__list-header">
             <div>
               <label class="t-checkbox">
                 <input type="checkbox" class="t-checkbox__former" value="">
                 <span class="t-checkbox__input"></span>
               </label>
               <span>4项</span>
             </div>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__list-content">
                <div class="t-checkbox-group">
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 1</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 2</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 3</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 4</span>
                  </li>
                </div>
              </div>
            </div>
          </div>
          <div class="t-transfer__operations">
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"
            ><i class="t-icon t-icon-arrow-right"></i></button>
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"><i
              class="t-icon t-icon-arrow-left"></i></button>
          </div>
          <div class="t-transfer__list t-transfer__list-target">
            <div class="t-transfer__list-header">
              <div>
                <label class="t-checkbox">
                  <input type="checkbox" class="t-checkbox__former" value="">
                  <span class="t-checkbox__input"></span>
                </label>
                <span>0项</span>
              </div>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__empty">暂无数据</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--带搜索框-->
  <div class="tdesign-demo-item tdesign-demo-item--transfer">
    <h2 class="tdesign-demo-item__title">1.1.2 带搜索框</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-transfer t-transfer__search">
          <div class="t-transfer__list t-transfer__list-source">
            <div class="t-transfer__list-header">
              <div>
                <label class="t-checkbox">
                  <input type="checkbox" class="t-checkbox__former" value="">
                  <span class="t-checkbox__input"></span>
                </label>
                <span>4项</span>
              </div>
            </div>
            <div class="t-transfer__list-body t-transfer__list--with-search">
              <div class="t-transfer__search-wrapper">
                <div class="t-input t-input--prefix t-input--suffix">
                  <input type="text" class="t-input__inner">
                  <span class="t-input__suffix">
                   <i class="t-icon t-icon-search"></i>
                 </span>
                </div>
              </div>
              <div class="t-transfer__list-content">
                <div class="t-checkbox-group">
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 1</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 2</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 3</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 4</span>
                  </li>
                </div>
              </div>
            </div>
          </div>
          <div class="t-transfer__operations">
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"
            ><i class="t-icon t-icon-arrow-right"></i></button>
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"><i
              class="t-icon t-icon-arrow-left"></i></button>
          </div>
          <div class="t-transfer__list t-transfer__list-target">
            <div class="t-transfer__list-header">
              <div>
                <label class="t-checkbox">
                  <input type="checkbox" class="t-checkbox__former" value="">
                  <span class="t-checkbox__input"></span>
                </label>
                <span>0项</span>
              </div>
            </div>
            <div class="t-transfer__list-body  t-transfer__list--with-search">
              <div class="t-transfer__search-wrapper">
                <div class="t-input t-input--prefix t-input--suffix">
                  <input type="text" class="t-input__inner">
                  <span class="t-input__suffix">
                   <i class="t-icon t-icon-search"></i>
                 </span>
                </div>
              </div>
              <div class="t-transfer__empty">暂无数据</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--1.1.3 结合树结构-->
  <div class="tdesign-demo-item tdesign-demo-item--transfer">
    <h2 class="tdesign-demo-item__title">1.1.3 结合树结构</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-transfer t-transfer__wrapper">
          <div class="t-transfer__list t-transfer__list-source">
            <div class="t-transfer__list-header">
              <div>
                <label class="t-checkbox">
                  <input type="checkbox" class="t-checkbox__former" value="">
                  <span class="t-checkbox__input"></span>
                </label>
                <span>4项</span>
              </div>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__list-wrapper">
                <div class="t-tree">
                  <!-- 第0层 -->
                  <div class="t-tree__item">
                    <span class="t-tree__icon"><svg class="t-icon t-icon-chevron-right" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M4.78170052 3.08475456L5.4888073 2.37764778 11.1111595 8 5.4888073 13.6223522 4.78170052 12.9152454 9.697 8z"></path></svg></span>
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="" />
                      <span class="t-checkbox__input"></span>
                      <span class="t-checkbox__label"></span>
                    </label>
                    <span class="t-tree__label">1 未选中项</span>
                  </div>
                  <!-- 第0层 -->
                  <div class="t-tree__item">
                    <span class="t-tree__icon"><svg class="t-icon t-icon-chevron-right" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M4.78170052 3.08475456L5.4888073 2.37764778 11.1111595 8 5.4888073 13.6223522 4.78170052 12.9152454 9.697 8z"></path></svg></span>
                    <label class="t-checkbox t-is-disabled">
                      <input type="checkbox" class="t-checkbox__former" value="" />
                      <span class="t-checkbox__input"></span>
                      <span class="t-checkbox__label"></span>
                    </label>
                    <span class="t-tree__label">2 未选禁用项</span>
                  </div>
                  <!-- 第0层 -->
                  <div class="t-tree__item t-tree__item--open">
                    <span class="t-tree__icon"><svg class="t-icon t-icon-chevron-right" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M4.78170052 3.08475456L5.4888073 2.37764778 11.1111595 8 5.4888073 13.6223522 4.78170052 12.9152454 9.697 8z"></path></svg></span>
                    <!-- 半选中 -->
                    <label class="t-checkbox t-is-indeterminate">
                      <input type="checkbox" class="t-checkbox__former" value="" />
                      <span class="t-checkbox__input"></span>
                      <span class="t-checkbox__label"></span>
                    </label>
                    <span class="t-tree__label">3 半选中项</span>
                  </div>
                  <!-- 第1层 -->
                  <div class="t-tree__item t-tree__item--open" style="--level: 1;">
                    <span class="t-tree__icon"><svg class="t-icon t-icon-chevron-right" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M4.78170052 3.08475456L5.4888073 2.37764778 11.1111595 8 5.4888073 13.6223522 4.78170052 12.9152454 9.697 8z"></path></svg></span>
                    <!-- 半选中 -->
                    <label class="t-checkbox t-is-indeterminate">
                      <input type="checkbox" class="t-checkbox__former" value="" />
                      <span class="t-checkbox__input"></span>
                      <span class="t-checkbox__label"></span>
                    </label>
                    <span class="t-tree__label">3.1 半选中项</span>
                  </div>
                  <!-- 第2层 -->
                  <div class="t-tree__item" style="--level: 2;">
                    <i class="t-tree__icon t-icon"></i>
                    <label class="t-checkbox t-is-checked">
                      <input type="checkbox" class="t-checkbox__former" value="" />
                      <span class="t-checkbox__input"></span>
                      <span class="t-checkbox__label"></span>
                    </label>
                    <span class="t-tree__label">3.1.1 选中项</span>
                  </div>
                  <!-- 第2层 -->
                  <div class="t-tree__item" style="--level: 2;">
                    <label class="t-checkbox t-is-checked t-is-disabled">
                      <input type="checkbox" class="t-checkbox__former" value="" />
                      <span class="t-checkbox__input"></span>
                      <span class="t-checkbox__label"></span>
                    </label>
                    <span class="t-tree__label">3.1.2 选中禁用项</span>
                  </div>
                  <!-- 第1层 -->
                  <div class="t-tree__item t-tree__item--open" style="--level: 1;">
                    <span class="t-tree__icon"><svg class="t-icon t-icon-chevron-right" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M4.78170052 3.08475456L5.4888073 2.37764778 11.1111595 8 5.4888073 13.6223522 4.78170052 12.9152454 9.697 8z"></path></svg></span>
                    <label class="t-checkbox t-is-indeterminate t-is-disabled">
                      <input type="checkbox" class="t-checkbox__former" value="" />
                      <span class="t-checkbox__input"></span>
                      <span class="t-checkbox__label"></span>
                    </label>
                    <span class="t-tree__label">3.2 半选禁用项</span>
                  </div>
                  <!-- 第2层 -->
                  <div class="t-tree__item" style="--level: 2;">
                    <i class="t-tree__icon t-icon"></i>
                    <label class="t-checkbox t-is-disabled">
                      <input type="checkbox" class="t-checkbox__former" value="" />
                      <span class="t-checkbox__input"></span>
                      <span class="t-checkbox__label"></span>
                    </label>
                    <span class="t-tree__label">3.2.1 未选禁用项</span>
                  </div>
                  <!-- 第2层 -->
                  <div class="t-tree__item" style="--level: 2;">
                    <label class="t-checkbox t-is-checked t-is-disabled">
                      <input type="checkbox" class="t-checkbox__former" value="" />
                      <span class="t-checkbox__input"></span>
                      <span class="t-checkbox__label"></span>
                    </label>
                    <span class="t-tree__label">3.2.2 选中禁用项</span>
                  </div>
                  <!-- 第0层 -->
                  <div class="t-tree__item">
                    <span class="t-tree__icon"><svg class="t-icon t-icon-chevron-right" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M4.78170052 3.08475456L5.4888073 2.37764778 11.1111595 8 5.4888073 13.6223522 4.78170052 12.9152454 9.697 8z"></path></svg></span>
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="" />
                      <span class="t-checkbox__input"></span>
                      <span class="t-checkbox__label"></span>
                    </label>
                    <span class="t-tree__label">4 第四段信息</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="t-transfer__operations">
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"
            ><i class="t-icon t-icon-arrow-right"></i></button>
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"><i
              class="t-icon t-icon-arrow-left"></i></button>
          </div>
          <div class="t-transfer__list t-transfer__list-target">
            <div class="t-transfer__list-header">
              <div>
                <label class="t-checkbox">
                  <input type="checkbox" class="t-checkbox__former" value="">
                  <span class="t-checkbox__input"></span>
                </label>
                <span>0项</span>
              </div>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__list-wrapper">
                <div class="t-transfer__empty">暂无数据</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--1.2.1 外框尺寸变化-->
  <div class="tdesign-demo-item tdesign-demo-item--transfer">
    <h2 class="tdesign-demo-item__title">1.2.1 外框尺寸变化</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-transfer">
          <div class="t-transfer__list t-transfer__list-source" style="width: 300px; height: 280px;">
            <div class="t-transfer__list-header">
              <div>
                <label class="t-checkbox">
                  <input type="checkbox" class="t-checkbox__former" value="">
                  <span class="t-checkbox__input"></span>
                </label>
                <span>4项</span>
              </div>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__list-content">
                <div class="t-checkbox-group">
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 1</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 2</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 3</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 4</span>
                  </li>
                </div>
              </div>
            </div>
          </div>
          <div class="t-transfer__operations">
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"
            ><i class="t-icon t-icon-arrow-right"></i></button>
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"><i
              class="t-icon t-icon-arrow-left"></i></button>
          </div>
          <div class="t-transfer__list t-transfer__list-target" style="width: 300px; height: 280px">
            <div class="t-transfer__list-header">
              <div>
                <label class="t-checkbox">
                  <input type="checkbox" class="t-checkbox__former" value="">
                  <span class="t-checkbox__input"></span>
                </label>
                <span>0项</span>
              </div>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__empty">暂无数据</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--1.3.1 右移-->
  <div class="tdesign-demo-item tdesign-demo-item--transfer">
    <h2 class="tdesign-demo-item__title">1.3.1 右移</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-transfer">
          <div class="t-transfer__list t-transfer__list-source">
            <div class="t-transfer__list-header">
             <div>
               <label class="t-checkbox t-is-indeterminate">
                 <input type="checkbox" class="t-checkbox__former" value="">
                 <span class="t-checkbox__input"></span>
               </label>
               <span>4项</span>
             </div>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__list-content">
                <div class="t-checkbox-group">
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 1</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox t-is-checked">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 2</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox t-is-checked">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 3</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 4</span>
                  </li>
                </div>
              </div>
            </div>
          </div>
          <div class="t-transfer__operations">
            <button class="t-button t-button--primary t-button--icon-only"
            ><i class="t-icon t-icon-arrow-right"></i></button>
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"><i
              class="t-icon t-icon-arrow-left"></i></button>
          </div>
          <div class="t-transfer__list t-transfer__list-target">
            <div class="t-transfer__list-header">
             <div>
               <label class="t-checkbox">
                 <input type="checkbox" class="t-checkbox__former" value="">
                 <span class="t-checkbox__input"></span>
               </label>
               <span>0项</span>
             </div>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__empty">暂无数据</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--1.3.2 左移-->
  <div class="tdesign-demo-item tdesign-demo-item--transfer">
    <h2 class="tdesign-demo-item__title">1.3.2 左移</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-transfer">
          <div class="t-transfer__list t-transfer__list-source">
            <div class="t-transfer__list-header">
              <div>
                <label class="t-checkbox">
                  <input type="checkbox" class="t-checkbox__former" value="">
                  <span class="t-checkbox__input"></span>
                </label>
                <span>4项</span>
              </div>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__list-content">
                <div class="t-checkbox-group">
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 1</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 2</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 3</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 4</span>
                  </li>
                </div>
              </div>
            </div>
          </div>
          <div class="t-transfer__operations">
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"
            ><i class="t-icon t-icon-arrow-right"></i></button>
            <button class="t-button t-button--primary t-button--icon-only"><i
              class="t-icon t-icon-arrow-left"></i></button>
          </div>
          <div class="t-transfer__list t-transfer__list-target">
            <div class="t-transfer__list-header">
              <div>
                <label class="t-checkbox t-is-indeterminate">
                  <input type="checkbox" class="t-checkbox__former" value="">
                  <span class="t-checkbox__input"></span>
                </label>
                <span>4项</span>
              </div>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__list-content">
                <div class="t-checkbox-group">
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 5</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox t-is-checked">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 6</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox t-is-checked">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 7</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 8</span>
                  </li>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--1.3.3 保留源列表数据项-->
  <div class="tdesign-demo-item tdesign-demo-item--transfer">
    <h2 class="tdesign-demo-item__title">1.3.3 保留源列表数据项</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-transfer">
          <div class="t-transfer__list t-transfer__list-source">
            <div class="t-transfer__list-header">
             <div>
               <label class="t-checkbox t-is-indeterminate">
                 <input type="checkbox" class="t-checkbox__former" value="">
                 <span class="t-checkbox__input"></span>
               </label>
               <span>4项</span>
             </div>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__list-content">
                <div class="t-checkbox-group">
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox t-is-checked">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 1</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox t-is-checked t-is-disabled">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 2</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox t-is-checked t-is-disabled">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 3</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 4</span>
                  </li>
                </div>
              </div>
            </div>
          </div>
          <div class="t-transfer__operations">
            <button class="t-button t-button--primary t-button--icon-only"
            ><i class="t-icon t-icon-arrow-right"></i></button>
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"><i
              class="t-icon t-icon-arrow-left"></i></button>
          </div>
          <div class="t-transfer__list t-transfer__list-target">
            <div class="t-transfer__list-header">
             <div>
               <label class="t-checkbox">
                 <input type="checkbox" class="t-checkbox__former" value="">
                 <span class="t-checkbox__input"></span>
               </label>
               <span>2项</span>
             </div>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__list-content">
                <div class="t-checkbox-group">
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 2</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 3</span>
                  </li>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--1.3.4 内容过多时-->
  <div class="tdesign-demo-item tdesign-demo-item--transfer">
    <h2 class="tdesign-demo-item__title">1.3.4 内容过多时</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-transfer">
          <div class="t-transfer__list t-transfer__list-source">
            <div class="t-transfer__list-header">
             <div>
               <label class="t-checkbox">
                 <input type="checkbox" class="t-checkbox__former" value="">
                 <span class="t-checkbox__input"></span>
               </label>
               <span>3项</span>
             </div>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__list-content">
                <div class="t-checkbox-group">
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>第一段信息第一段信息第一段信息</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>第二段信息第二段信息第二段信息</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>第三段信息第三段信息第三段信息</span>
                  </li>
                </div>
              </div>
            </div>
          </div>
          <div class="t-transfer__operations">
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"
            ><i class="t-icon t-icon-arrow-right"></i></button>
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"><i
              class="t-icon t-icon-arrow-left"></i></button>
          </div>
          <div class="t-transfer__list t-transfer__list-target">
            <div class="t-transfer__list-header">
              <div>
                <label class="t-checkbox">
                  <input type="checkbox" class="t-checkbox__former" value="">
                  <span class="t-checkbox__input"></span>
                </label>
                <span>0项</span>
              </div>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__empty">暂无数据</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--1.3.5 数据项数量过多时-->
  <div class="tdesign-demo-item tdesign-demo-item--transfer">
    <h2 class="tdesign-demo-item__title">1.3.5 数据项数量过多时</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-transfer t-transfer__pagination">
          <div class="t-transfer__list t-transfer__list-source">
            <div class="t-transfer__list-header">
              <div>
                <label class="t-checkbox">
                  <input type="checkbox" class="t-checkbox__former" value="">
                  <span class="t-checkbox__input"></span>
                </label>
                <span>12项</span>
              </div>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__list-content">
                <div class="t-checkbox-group">
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 1</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 2</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 3</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 4</span>
                  </li>
                </div>
              </div>
            </div>
            <div class="t-transfer__list-pagination">
              <i class="t-icon t-icon-arrow-left"></i>
              <span>1/3</span>
              <i class="t-icon t-icon-arrow-right"></i>
            </div>
          </div>
          <div class="t-transfer__operations">
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"
            ><i class="t-icon t-icon-arrow-right"></i></button>
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"><i
              class="t-icon t-icon-arrow-left"></i></button>
          </div>
          <div class="t-transfer__list t-transfer__list-target">
            <div class="t-transfer__list-header">
              <div>
                <label class="t-checkbox">
                  <input type="checkbox" class="t-checkbox__former" value="">
                  <span class="t-checkbox__input"></span>
                </label>
                <span>400项</span>
              </div>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__list-content">
                <div class="t-checkbox-group">
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 5</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 6</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 7</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 8</span>
                  </li>
                </div>
              </div>
            </div>
            <div class="t-transfer__list-pagination">
              <i class="t-icon t-icon-arrow-left"></i>
              <span>1/100</span>
              <i class="t-icon t-icon-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--1.3.6 带标题样式-->
  <div class="tdesign-demo-item tdesign-demo-item--transfer">
    <h2 class="tdesign-demo-item__title">1.3.6 带标题样式</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-transfer">
          <div class="t-transfer__list t-transfer__list-source">
            <div class="t-transfer__list-header">
              <div>
                <label class="t-checkbox">
                  <input type="checkbox" class="t-checkbox__former" value="">
                  <span class="t-checkbox__input"></span>
                </label>
                <span>4项</span>
              </div>
              <span>源列表</span>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__list-content">
                <div class="t-checkbox-group">
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 1</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 2</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 3</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 4</span>
                  </li>
                </div>
              </div>
            </div>
          </div>
          <div class="t-transfer__operations">
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"
            ><i class="t-icon t-icon-arrow-right"></i></button>
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"><i
              class="t-icon t-icon-arrow-left"></i></button>
          </div>
          <div class="t-transfer__list t-transfer__list-target">
            <div class="t-transfer__list-header">
              <div>
                <label class="t-checkbox">
                  <input type="checkbox" class="t-checkbox__former" value="">
                  <span class="t-checkbox__input"></span>
                </label>
                <span>0项</span>
              </div>
              <span>目标列表</span>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__empty">暂无数据</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--1.3.7 自定义底部-->
  <div class="tdesign-demo-item tdesign-demo-item--transfer">
    <h2 class="tdesign-demo-item__title">1.3.7 自定义底部</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-transfer t-transfer__footer">
          <div class="t-transfer__list t-transfer__list-source">
            <div class="t-transfer__list-header">
              <div>
                <label class="t-checkbox">
                  <input type="checkbox" class="t-checkbox__former" value="">
                  <span class="t-checkbox__input"></span>
                </label>
                <span>4项</span>
              </div>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__list-content">
                <div class="t-checkbox-group">
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 1</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 2</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 3</span>
                  </li>
                  <li class="t-transfer__list-item">
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                    <span>content 4</span>
                  </li>
                </div>
              </div>
            </div>
            <div class="t-transfer__list-footer">
             <div style="width: 100%; text-align: right">
               <button class="t-button t-button--primary" style="height: 24px;margin: 12px 12px 12px auto">自定义功能</button>
             </div>
            </div>
          </div>
          <div class="t-transfer__operations">
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"
            ><i class="t-icon t-icon-arrow-right"></i></button>
            <button class="t-button t-button--line t-is-disabled t-button--icon-only"><i
              class="t-icon t-icon-arrow-left"></i></button>
          </div>
          <div class="t-transfer__list t-transfer__list-target">
            <div class="t-transfer__list-header">
              <div>
                <label class="t-checkbox">
                  <input type="checkbox" class="t-checkbox__former" value="">
                  <span class="t-checkbox__input"></span>
                </label>
                <span>0项</span>
              </div>
            </div>
            <div class="t-transfer__list-body">
              <div class="t-transfer__empty">暂无数据</div>
            </div>
            <div class="t-transfer__list-footer">
              <div style="width: 100%; text-align: right">
                <button class="t-button t-button--primary" style="height: 24px;margin: 12px 12px 12px auto">自定义功能</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>